<!--
 * @Description: 设备上下行TOP5
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-22 14:09:49
 * @LastEditTime: 2021-09-28 10:15:26
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="card-box">
    <div class="head">
      <p class="line-title">
        <i class="iconfont" style="color: #95DE64; background: rgba(149, 222, 100, 0.15)">&#xe60a;</i>
        <span>设备带宽TOP5</span>
      </p>
    </div>
    <div class="chart-box">
      <div id="top"></div>
      <div v-show="topSum === 0" class="noval">
        <div class="noval-content">
          <i class="iconfont">&#xe707;</i>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  data () {
    return {
      topSum: 0,
      tableData: []
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getTop();
    });
  },
  methods: {
    // 过滤换算 BPS
    filterKM (v) {
      v = Number(v);
      if (v >= 0 && v < 1000) {
        v = v.toFixed(2) + 'bps';
      }
      if (v >= 1000 && v < 1000000) {
        v = (v / 1000).toFixed(2) + 'Kbps';
      }
      if (v >= 1000000) {
        v = (v / 1000000).toFixed(2) + 'Mbps';
      }
      return v;
    },
    getTop () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/pm/top'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { downTop, upTop5 } = resultBody;
          _this.topSum = downTop ? downTop.length : 0;
          let arry = [];
          let bwx = [];
          let down = downTop.reverse();
          let up = upTop5.reverse();
          for (let i = 0; i < down.length; i++) {
            arry.push({ type: down[i].userlabel + ' - 上行', value: down[i].speed, cat: '上行带宽' });
            bwx.push(downTop[i].speed);
          }
          for (let i = 0; i < up.length; i++) {
            arry.push({ type: up[i].userlabel + ' - 下行', value: up[i].speed, cat: '下行带宽' });
            bwx.push(upTop5[i].speed);
          }
          _this.tableData = arry;
          _this.topChartInit(bwx);
        }
      });
    },
    topChartInit (bwx) {
      const topChart = new Chart({
        container: 'top',
        autoFit: true,
        height: 400,
        padding: [0, 80, 50, 20],
      });
      topChart.data(this.tableData);
      topChart.scale({
        value: {
          max: Math.max(...bwx) + 15000,
          min: 0,
          alias: '带宽速率',
        },
      });
      topChart.axis('type', false);
      topChart.axis('value', {
        label: null,
        title: {
          offset: 30,
          style: {
            fontWeight: 300,
          },
        },
        grid: null,
      });
      topChart.legend(false);
      topChart.coordinate('rect').transpose();
      topChart.interval().position('type*value').color('cat', ['#f3a058', '#4ed2a2']).size(26).label('value', {
        style: {
          fill: '#8d8d8d',
        },
        offset: 10,
        content: (originData) => {
          return (this.filterKM(originData.value)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        },
      });
      topChart.tooltip({
        customItems: (items) => {
          items[0].value = this.filterKM(items[0].value);
          return items;
        },
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{title} {value}</li>'
      });
      topChart.annotation().line({
        start: ['-20%', '50%'],
        end: ['100%', '50%'],
        style: {
          stroke: '#c0c0c0',
          lineDash: [2, 2],
        },
      });
      topChart.render();
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  height: 400px;
  overflow: hidden;
  .noval {
    background: #fff;
    width: 100%;
    height: 400px;
    position: relative;
    top: -400px;
    left: 0;
    .noval-content {
      position: absolute;
      top: 40%;
      left: 50%;
      text-align: center;
      i {
        color: #d7d6d6;
        font-size: 40px;
      }
      p {
        color: #999;
        font-size: 13px;
        line-height: 30px;
        margin-top: 10px;
      }
    }
  }
}
</style>